<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/stype.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <table class="layui-table" lay-data="{url:'{{url('admin/getusers')}}', page:true, id:'test2', skin: 'row', even: true}" lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{type:'checkbox'}"></th>
            <th lay-data="{field:'user_id', width:'5%', sort: true}">ID</th>
            <th lay-data="{field:'user_name', width:'10%', templet: '#valid'}">用户名</th>
            <th lay-data="{field:'phone', width:'10%', sort: true,}">手机</th>
            <th lay-data="{field:'tui_id', width:'10%',templet:'#tui_id'}">推荐人</th>
            <th lay-data="{field:'reg_time', width:'10%', sort: true}">注册时间</th>
            <th lay-data="{field:'login_time', width:'10%', sort: true}">最后登录</th>
            <th lay-data="{field:'yue_e', width:'10%', sort: true}">余额</th>
            <th lay-data="{field:'t_money', width:'5%', sort: true}">积分</th>
            <th lay-data="{field:'type', width:'15%',align:'center',  templet:'#checkboxTpl'}">状态</th>
            <th lay-data="{field:'wealth', width:'10%', align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.min.js"></script>
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="type" value="@{{d.user_id}}" title="@{{ d.type == 1 ? '有效' : '无效' }}" lay-filter="lockDemo" @{{ d.type == 1 ? 'checked' : '' }}>
    <input type="checkbox" name="starts" value="@{{d.user_id}}" title="@{{ d.starts == 1 ? '激活' : '未激' }}" lay-filter="lockDemo" @{{ d.starts == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="valid">
    @{{#  if(d.valid == 1){ }}
    <span style="color: #F581B1;">@{{d.user_name}}</span>
    @{{#  } else { }}
    @{{d.user_name}}
    @{{#  } }}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        layer = layui.layer //弹层
            ,table = layui.table
            ,form = layui.form;
        //监听工具条
        table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });
        //监听状态操作
        form.on('checkbox(lockDemo)', function(obj){
            var _this = this;
            $.post("{{url('admin/e_type')}}",{'name':this.name,'user_id':this.value,'_token':"{{ csrf_token() }}"},function(e){
                _this.title = e;
                form.render('checkbox');
            })
        });

    });
</script>
</body>
</html>